<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= web_title%></title>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/ruoling/css/ruoling-ui.css">
    <link rel="stylesheet" href="/ruoling/css/ruoling-load.css">
</head>
<body>
    <div class="layui-fluid" >
       <div class="Yiling-white Yiling-top">
           <form class="layui-form">
                <ul>
                    <li class="Yiling-paddingLi" >
                        <span>菜单名称:</span> <input type="text" name="title" placeholder="请输入菜单名称" autocomplete="off" class="layui-input Yiling-width200">
                    </li>
                    <li class="Yiling-paddingLi">
                        <button type="button"  lay-submit lay-filter="FormSearch" class="layui-btn layui-btn-sm layui-btn-radius"><i class="layui-icon layui-icon-search" style="font-size:14px"></i>搜索</button>
                        <button type="button" id="CloseSubmit"  class="layui-btn layui-btn-sm layui-btn-radius  layui-btn-warm"><i class=" layui-icon layui-icon-refresh-3" style="font-size:14px"></i>重置</button>
                    </li>
                </ul>
            </form>
       </div>
    </div>
    <div class="layui-fluid">
        <div class="Yiling-white Yiling-top">
            <table id="Yiling-table"  ></table>
        </div>
    </div>
</body>
<!-- 工具栏模板： -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm Yliing-blue"  lay-event="add"> <i class="layui-icon layui-icon-add-1"></i>新增</button>
    <button class="layui-btn layui-btn-sm Yliing-blue"  lay-event="Barexpansion"> <i class="layui-icon layui-icon-add-1"></i>展开/折叠</button>
  </div> 
</script>
</html>
<script src="/layuiadmin/layui/layui.js"></script>
<script>

layui.config({
    base:""
}).extend({
    treeTable:"/libs/tableTree/js/treeTable",
    Yiling:"/libs/ruoling-request/js/Yiling-Request"
}).use(["table","layer","jquery","treeTable","form",'Yiling'],function(){
    let table = layui.table;
    let layer = layui.layer;
    let treeTable = layui.treeTable;
    let $ = layui.jquery;
    let form = layui.form;
    let request = layui.Yiling.YI_Ajax;

    //展开和折叠
    let OpenBarexpansionIndex = true;
    var	tableInt = treeTable.render({
                elem: '#Yiling-table',
                url: '/admin/v1/api/system/menu/list',
                height: 'full',
                toolbar: 'default',
                skin:"line",
                size:"sm",
                arrowType:"arrow2",
                toolbar:"#toolbarDemo",
                tree: {
                    iconIndex: 2,           // 折叠图标显示在第几列
                    isPidData: true,        // 是否是id、pid形式数据
                    idName: 'id',  // id字段名称
                    pidName: 'pid',     // pid字段名称
                    openName:"",
                    onlyIconControl:true, //仅允许点击图标折叠
                    getIcon: function(d) {  // 自定义图标
                            // d是当前行的数据
                        if (d.haveChild) {  // 判断是否有子集
                            return '<i class="ew-tree-icon ew-tree-icon-folder"></i>';
                        } else {
                            return '<i class="ew-tree-icon ew-tree-icon-file"></i>';
                        }
                    }
                },
                defaultToolbar: ['filter', 'print', 'exports', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    {type: 'checkbox',fixed:"left"},
                    {field: 'id', title: 'ID',width:"70px"},
                    {field: 'sys_menu_name', title: '菜单名称',width:"200px"},
                    {field: 'sys_type_desc', title: '菜单描述',width:"160px"},
                    {field: 'sys_permission_url', title: '请求地址',width:"180px"},
                    {field: 'sys_menu_type', title: '菜单类型',templet:"#TypeBar",width:"100px"},
                    {field: 'Create_time', title: '创建时间',width:"180px",templet:"#SetDateCrete"},
                    {title: '操作',width:200,templet:"#BarOper",fixed:"right"}
                ]],
                style: 'margin-top:0;'
            });
         
        /**
         * 检索
         * **/
         form.on('submit(FormSearch)', function(data){
          // layer.msg(JSON.stringify(data.field));
            let obj = data.field;
            tableInt.filterData(obj.title)
        
            return false;
        });
        
        let ToolEditIndex = null;
        treeTable.on("tool(Yiling-table)",function(obj){   //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data;   //获取当前数据

            if(obj.event == "tooldel"){

                layer.confirm('是否需要删除！', {
                    btn: ['确认', '取消'] //可以无限个按钮
                }, function(index, layero){
                    //按钮【按钮一】的回调
                    new request().SetUrl("/admin/v1/api/system/menu/delete").SetType("POST").SetDataPara({Id:data.id}).Alone().Init(function(result){
                        window.LoadTable();
                    });
                    layer.close(index)
                    }, function(index){
                    //按钮【按钮二】的回调
                        layer.close(index)
                    });
            }else if(obj.event == "tooledit"){
                console.log(data)
            ToolEditIndex = layer.open({
                            type:2,
                            content:"/admin/system/menu/edit/view?Id="+data.id,
                            title:"菜单编辑",
                            maxmin:true,
                            shadeClose:false,
                            area:["800px","600px"],
                            success:function(){
                               
                            }
                      })   
            }
        });

        treeTable.on("toolbar(Yiling-table)",function(obj){
            let data = obj.data;

            switch(obj.event){
                case "add":
                    OpenAdd();
                    break;
                case "Barexpansion":
                    OpenBarexpansion();
                    break;
            }
        });

        let AddIndex = null;        
        let OpenAdd = function () {
           AddIndex = layer.open({
                            type:2,
                            content:"/admin/system/menu/add/view",
                            title:"菜单添加",
                            maxmin:true,
                            shadeClose:false,
                            area:["800px","600px"],
                            success:function(){
                               
                            }

                      })         
        };

        let OpenBarexpansion = function () {

            if(OpenBarexpansionIndex){
                tableInt.expandAll();
                OpenBarexpansionIndex = false;
            }else{
                tableInt.foldAll();
                OpenBarexpansionIndex = true;
            }
        }

    //调用方法
    window.LoadTable = function (){
       
        tableInt.reload({
            where:{}
        })
    }
})
</script>

<script type="text/html" id="ImagesID">
    <a href="javascript:;"><img style="width:30px;height:30px" src="{{d.imgpath}}" alt=""></a>
</script>

<script type="text/html" id="TypeBar">
    {{Setcartetype(d.sys_menu_type)}}
</script>

<script type="text/html" id="Settype">
    {{SetSexType(d.type)}}
</script>

<!-- 时间格式化 -->
<script type="text/html" id="SetDateCrete">
    {{FormDate(d.Create_time,"yyyy年MM月dd日 HH:mm:ss")}}
</script>

<script type="text/html" id="BarOper">
    {{BarOperFn(d)}}
</script>


<script>

    function Setcartetype(value){

        if(value == "M"){
            return '<button class="layui-btn layui-btn-xs Yliing-blue">目录</button>';
        }else if(value == "C"){
            return '<button class="layui-btn layui-btn-xs Yiling-cyan">菜单</button>';
        }else if(value == "A"){
            return '<button class="layui-btn layui-btn-xs Yiling-yellow">按钮</button>';
        }
    }

    function BarOperFn(value){
        if(value.id == 1){
            return "";
        }else{
            return `<div class="Barmore">
                     <button class="layui-btn layui-btn-xs Yliing-blue" lay-event="tooledit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
                     <button class="layui-btn layui-btn-xs Yiling-Red" lay-event="tooldel"><i class="layui-icon layui-icon-close"></i>删除</button>
                </div>`
        }

    }

    function FormDate(d,str){
        return layui.util.toDateString(d, str)
    }

</script>